<template>
  <div class="page-box">
    <div>
      <ProTable ref="proTable" highlight-current-row :columns="columns" :request-api="getTableList"> </ProTable>
    </div>
    <GoodsInfo ref="drawerRef" />
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onActivated } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { getOwnerList } from "@/api/modules/owner";
import { useDebounceFn } from "@vueuse/core";

const searchForm = ref<any>({
  keyword: ""
});
const proTable = ref<ProTableInstance>();
const columns = reactive<ColumnProps<any>[]>([
  { prop: "employeeNo", label: "客户编号", minWidth: "200" },
  { prop: "username", label: "客户姓名", minWidth: "100" },
  { prop: "phone", label: "联系方式", minWidth: "100" },
  { prop: "email", label: "邮箱地址", minWidth: "100" }
]);

onActivated(() => {
  proTable.value?.getTableList();
});

const getTableList = useDebounceFn(async params => {
  const newParams = {
    pageIndex: params.pageIndex,
    pageSize: params.pageSize,
    ...searchForm.value
  };
  if (!newParams.pageIndex) {
    newParams.pageIndex = 1;
  }
  if (!newParams.pageSize) {
    newParams.pageSize = 10;
  }
  return await getOwnerList(newParams);
}, 50);
</script>
